<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警日报</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" @node-click="deptChoose">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="yjxdlb" :compRef="table.compRef" ref="yjxdlb" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" />
    </div>
    <!-- 新增弹窗信息 -->
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="Qxiao">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <!-- 信息来源 预警通知单 -->
        <DialogForm ref="sourceFormComponent" slot="slot1" :formConfig="sourceFormConfig"
          @changeEvent="eventChangeSelected" />
        <div slot="slot2">
          <!-- 预警日报 -->
          <DialogForm ref="formComponent1" :formConfig="formConfig1" />
          <!-- 投入力量 -->
          <!-- <LsdTable slot="xzdw" :compRef="config.table1.compRef" ref="xzdw" :columns="config.table1.columns"
            :title="config.table1.title" :actions="config.table1.actions" :tableData="config.table1.tableData"
            :tableAttr="config.table1.tableAttr" :isShowPage="config.table1.isShowPage"
            :isSelectFlag="config.table1.isSelectFlag" :isSequenceFlag="config.table1.isSequenceFlag" @select="select"
            @selection-change="select" @onActionClick="onActionClick" /> -->

          <el-table border :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' }"
            ref="table" max-height="300px" :data="putData" tooltip-effect="dark" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="department" label="单位" show-overflow-tooltip align="center" width="330px">
            </el-table-column>
            <el-table-column label="投入力量" show-overflow-tooltip align="center">
              <!-- <el-table-column prop="memberTotality" label="人员(人次)" show-overflow-tooltip align="center">
              </el-table-column> -->
              <el-table-column prop="teamTotality" label="队伍" show-overflow-tooltip align="center">
              </el-table-column>
              <el-table-column prop="equipTotality" label="装备" show-overflow-tooltip align="center">
              </el-table-column>
              <el-table-column prop="vehicleTotality" label="车辆" show-overflow-tooltip align="center">
              </el-table-column>
            </el-table-column>
          </el-table>
          <!-- 采取措施情况 -->
          <DialogForm style="margin-top:10px" ref="formComponent2" :formConfig="formConfig2" />
        </div>
        <!-- 下一步工作安排及建议 -->
        <DialogForm ref="formComponent3" slot="slot3" :formConfig="formConfig3" />
        <!-- 填报信息（填报人） -->
        <DialogForm ref="formComponent4" slot="slot4" :formConfig="formConfig4" />
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import { getListApi, addApi, submitApi, updateApi, getByIdApi, delApi, getPutDataApi, getDailyNameApi } from "@/api/EarlyWarningManagement/yjrb";
import { getDictByGroup, getOrgDepartmentList } from "@/api/common";
import {
  getAllWarningNotifApi
} from "@/api/EarlyWarningManagement/dgdw.js";
import { tableData } from "./config";
import { showTime } from "@/lib";
export default {
  data() {
    return {
      form: {
        warningNoticeName: "", // 预警通知单id
        dailyName: "", // 日报名称
        creatorDeptId: "", // 创建人部门id 发布单位及部门
        startTime: "", // 上报时间
        dangerCode: "", // 险情类别
        warningLvCode: "", // 预警级别
        effectRange: "", // 影响范围
        effectTime: "" // 影响时间
      },
      rules: {
        useUserName: [
          { required: true, message: "请输入领用人", trigger: "blur" }
        ]
      },
      // 弹窗信息
      dialogConfig: {
        title: "预警日报",
        isShow: false,
        type: "add",
        btnList: [
          {
            name: "提交",
            type: "primary",
            id: "submitBtn",
            size: "mini"
          },
          {
            name: "保存",
            id: "saveBtn",
            size: "mini"
          },
          {
            name: "取消",
            id: "Qxiao",
            size: "mini"
          }
        ]
      },
      // 折叠面板
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "预警日报",
          name: "2",
          slot: "slot2"
        },
        {
          title: "下一步工作安排及建议",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        }
      ],
      activeNames: ["1", "2", "3", "4"],
      formData: [
        {
          elType: "input",
          id: "warningNoticeName",
          label: "预警通知单",
          attrs: {
            value: "",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          }
          // options: []
        },
        {
          elType: "input",
          id: "dailyName",
          label: "日报名称",
          attrs: {
            size: "small",
            clearable: true,
            value: ""
          }
        },
        // {
        //   elType: "cascader",
        //   id: "creatorDeptId",
        //   label: "发布单位及部门",
        //   attrs: {
        //     value: "",
        //     clearable: true,
        //     filterable: true,
        //     "collapse-tags": true,
        //     props: {
        //       label: "orgName",
        //       value: "id",
        //       checkStrictly: true,
        //       emitPath: false
        //     }
        //   },
        //   options: []
        // },
        {
          elType: "lsdTree",
          id: "creatorDeptName",
          name: "creatorDeptId",
          treeRef: "treeRef",
          keyWord: "keyWord",
          commonClick: true,
          label: "发布单位及部门",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "dateTimePicker",
          id: "startTime",
          label: "上报时间",
          attrs: {
            value: "",
            clearable: true,
            type: "datetimerange",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "select",
          id: "dangerCode",
          label: "险情类别",
          dic: "dic_xqlb",
          attrs: {
            value: "",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "warningLvCode",
          label: "预警级别",
          dic: "dic_yjjb",
          attrs: {
            value: "",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "input",
          id: "effectRange",
          label: "影响范围",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "dateTimePicker",
          id: "effectTime",
          label: "影响时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetimerange",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
        // {
        //   elType: "dateTimePicker",
        //   id: "effectStartTime",
        //   label: "影响开始时间",
        //   attrs: {
        //     value: "",
        //     type: "datetime",
        //     "value-format": "yyyy-MM-dd HH:mm:ss"
        //   }
        // },
        // {
        //   elType: "dateTimePicker",
        //   id: "effectEndTime",
        //   label: "影响结束时间",
        //   attrs: {
        //     value: "",
        //     type: "datetime",
        //     "value-format": "yyyy-MM-dd HH:mm:ss"
        //   }
        // }
      ],
      // 预警通知单
      sourceFormConfig: {
        formData: [
          {
            type: "select",
            label: "预警通知单",
            clearable: true,
            prop: "notificationId",
            class: "sjgy",
            lableWidth: "160px",
            option: []
          }
        ],
        rules: {
          notificationId: [
            { required: true, message: "请选择预警通知单", trigger: "change" }
          ]
        }
      },
      // 预警日报
      formConfig1: {
        formData: [
          {
            label: "日报名称",
            type: "input",
            prop: "dailyName",
            class: "sjgy",
            lableWidth: "160px",
            isDisabled: true
          },
          {
            label: "总体情况",
            type: "textarea",
            prop: "overallSituation",
            class: "sjgy",
            lableWidth: "160px"
          }
        ],
        rules: {
          /* dailyName: [
            { required: true, message: "请输入日报名称", trigger: "blur" }
          ], */
          overallSituation: [
            { required: true, message: "请输入总体情况", trigger: "blur" }
          ]
        },
        disabled: false
      },
      // 措施情况
      formConfig2: {
        formData: [
          {
            type: "textarea",
            label: "采取措施情况",
            prop: "measureSituation",
            class: "sjgy",
            lableWidth: "160px"
          }
        ],
        rules: {
          measureSituation: [
            { required: true, message: "请输入采取措施情况", trigger: "blur" }
          ]
        },
        disabled: false
      },
      // 下一步工作安排及建议
      formConfig3: {
        formData: [
          {
            type: "textarea",
            label: "下一步工作安排",
            prop: "nextWorkPlan",
            class: "sjgy",
            lableWidth: "160px"
          },
          {
            type: "textarea",
            label: "工作建议",
            prop: "workSuggest",
            class: "sjgy",
            lableWidth: "160px"
          }
        ],
        rules: {
          nextWorkPlan: [
            { required: true, message: "请输入下一步工作安排", trigger: "blur" }
          ],
          workSuggest: [
            { required: true, message: "请输入工作建议", trigger: "blur" }
          ]
        },
        disabled: false
      },
      // 上报信息
      formConfig4: {
        formData: [
          {
            type: "input",
            label: "上报人",
            prop: "creator",
            class: "third",
            lableWidth: "162px",
            isDisabled: true
          },
          {
            type: "input",
            label: "发布单位及部门",
            prop: "creatorDeptName",
            class: "thirds",
            lableWidth: "140px",
            isDisabled: true
          },
          {
            type: "input",
            label: "上报时间",
            prop: "createTime",
            class: "forth",
            lableWidth: "150px",
            dateType: "datetime",
            isDisabled: true
          }
        ]
      },
      pageNum: 1,
      pageSize: 10,
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "预警日报列表",
        actions: [
          {
            id: "addPlanDialog",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
          // {
          //   id: "onExport",
          //   text: "导出",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [],
        columns: [
          {
            prop: "dailyName",
            label: "日报名称",
            align: "left",
            "width": "500px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            this.viewDetail(row.id);
                          }
                        }
                      }}
                    >
                      {row.dailyName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dangerName",
            label: "险情类别",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "warningLvName",
            label: "预警级别",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "left",
            "min-width": "150px"
          },
          {
            prop: "effectStartTime",
            label: "影响时间",
            align: "left",
            width: "186px",
            // "min-width": "186px",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { effectStartTime, effectEndTime } = row;
              return `${effectStartTime}至${effectEndTime}`;

            }
          },
          {
            prop: "creatorDeptName",
            label: "发布单位及部门",
            align: "left",
            "min-width": "160px"
          },
          {
            prop: "createTime",
            label: "上报时间",
            align: "center",
            "min-width": "170px"
          },
          {
            prop: "creator",
            label: "上报人",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "warningNoticeName",
            label: "预警通知单",
            align: "left",
            "width": "280px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            // 查看预警通知单
                            this.toWarningNotice(row.notificationId);
                          }
                        }
                      }}
                    >
                      {row.warningNoticeName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "state",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { state } = row;
              if (state == "0") {
                return "编辑中";
              } else {
                return "已上报";
              }
            }
          },
          {
            prop: "",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "150px",
            render: (h, scope) => {
              let arr = [];
              const tbPower = this.common.isHasPower("tbr");
              if (scope.row.state == "0" && tbPower) {
                arr = ["编辑", "删除"];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      tableData1: tableData,
      status: "",
      putData: [] // 投入力量
    };
  },
  computed: {
    // config() {
    //   return require(`./config`).default.config(this)
    // }
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        creatorDeptId: (org && JSON.parse(org).orgId) || "",
        unitName: (org && JSON.parse(org).orgName) || "",
        departmentName: (org && JSON.parse(org).departmentName) || ""
      };
      return creator;
    }
  },
  watch: {
    "$route.query.status": {
      handler(newVal) {
        console.log(newVal);
        this.status = newVal || "";
        this.form.state = newVal || "";
        this.list();
      },
      deep: true
    }
  },
  created() {
    const { status } = this.$route.query;
    this.status = status || "";
    this.form.state = status || "";
    this.getOptionsByDict();
    this.list();
    this.getAllWarningNotif();
    this.getUnitTree();
    // this.getDailyName()
  },
  methods: {
    deptChoose(val, item) {
      if (item.name == "creatorDeptId") {
        this.$set(this.form, "creatorDeptName", val[0].orgName);
        this.$set(this.form, "creatorDeptId", val[0].id);
      }
      console.log(val, item);
    },
    // 获取筛选项
    getOptionsByDict() {
      this.formData.forEach(item => {
        if (item.dic) {
          getDictByGroup({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    // 重置
    reset() {
      // this.$refs["form"].$children[2].$children[1].$children[0].panel.clearCheckedNodes();
      // this.$refs["form"].$children[2].$children[1].$children[0].panel.activePath = [];
      this.form = this.$options.data().form;
      console.log(this.form);
      this.form.state = this.status;
      this.query();
    },
    // 检索
    query() {
      this.list();
    },
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      };
      parmas.effectStartTime = this.form.effectTime.length ? this.form.effectTime[0] : "";
      parmas.effectEndTime = this.form.effectTime.length ? this.form.effectTime[1] : "";
      parmas.startTime = this.form.startTime.length ? this.form.startTime[0] : "";
      parmas.endTime = this.form.startTime.length ? this.form.startTime[1] : "";
      const res = await getListApi(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 调用按钮对应方法
    onActionClick(item, index) {
      this[item.id](0);
    },
    // 新增
    addPlanDialog(type) {
      this.dialogConfig.isShow = true;
      this.type = type;
      // const types = ["新增", "编辑", "审批", "查看"]
      if (type != 1) {
        this.$nextTick(() => {
          this.$set(this.$refs.formComponent4.form, "creator", this.getCreator.name);
          this.$set(this.$refs.formComponent4.form, "creatorDeptName", sessionStorage.dwbmName);
          // this.$set(this.$refs.formComponent4.form, "createTime", new Date().toLocaleString().replace(/\//g, "-"))
          this.$set(this.$refs.formComponent4.form, "createTime", showTime(new Date()));
        });
      }
      // console.log(`type: ${types[type]}`)
      console.log(this.sourceFormConfig.formData[0]);
    },
    // 列表选队伍
    selectTeam(row) {
      this.dialogConfig.isShow = true;
      this.dialogConfig.type = "select";
      this.dialogConfig.title = "行动队伍选择";
      this.dialogConfig.btnList = [
        {
          name: "提交",
          type: "primary",
          id: "submit",
          size: "mini"
        },
        {
          name: "保存",
          id: "save",
          size: "mini"
        },
        {
          name: "取消",
          id: "cancel",
          size: "mini"
        }
      ];
      this.titleConfig = [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "任务信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "队伍信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        }
      ];
      this.sourceFormConfig.disabled = true;
      this.formConfig1.disabled = true;
    },
    // 列表跳预警通知单
    listDetail(row) {
      this.$router.push({
        path: "/WarningDailyDetail"
      });
    },
    // 弹窗关闭
    close(val) {
      console.log(val);
      val.isShow = false;
      this.sourceFormConfig.disabled = false;
      this.formConfig1.disabled = false;
      this.formConfig1.disabled = false;
    },
    // 提交数据处理
    handleData() {
      this.$refs.sourceFormComponent.isValidate();
      this.$refs.formComponent1.isValidate();
      this.$refs.formComponent2.isValidate();
      this.$refs.formComponent3.isValidate();

      const flag = this.$refs.sourceFormComponent.flag;
      const flag1 = this.$refs.formComponent1.flag;
      const flag2 = this.$refs.formComponent2.flag;
      const flag3 = this.$refs.formComponent3.flag;
      const creatorDeptId = { creatorDeptId: this.getCreator.creatorDeptId };
      const creatorUnitName = { creatorUnitName: this.getCreator.departmentName };

      const parmas = Object.assign({}, this.$refs.sourceFormComponent.form, this.$refs.formComponent1.form, this.$refs.formComponent2.form, this.$refs.formComponent3.form, this.$refs.formComponent4.form, creatorDeptId, creatorUnitName);


      return {
        isValidate: flag && flag1 && flag2 && flag3,
        parmas
      };
    },
    // 保存
    async saveBtn() {
      const { isValidate, parmas } = this.handleData();
      // return
      if (isValidate) {
        try {
          let message = "";
          if (this.type == 0) {
            await addApi(parmas);
            message = "保存成功";
          } else {
            await updateApi(parmas);
            message = "编辑成功";
          }

          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.Qxiao();

        } catch (error) {
          console.error(error);
        }
      }
    },
    // 提交
    async submitBtn() {
      const { isValidate, parmas } = this.handleData();
      if (isValidate) {
        try {
          let message = "";
          await submitApi(parmas);
          message = "提交成功";

          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.Qxiao();

        } catch (error) {
          console.error(error);
        }
      }
    },
    // 取消
    Qxiao() {
      this.putData = [];
      this.$refs.sourceFormComponent.form.notificationId = "";

      this.$refs.sourceFormComponent.form = this.$refs.sourceFormComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$refs.formComponent4.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.sourceFormConfig.formData[0].isDisabled = false;
        // this.planFormConfig.formData[0].isDisabled = false
        // this.planFormConfig.formData[1].isDisabled = false
        // this.planFormConfig.formData[2].isDisabled = false
        this.$refs.sourceFormComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
        this.$refs.formComponent4.$refs.formInlines.clearValidate();
        // this.eventDataForm = {}
        this.dialogConfig.isShow = false;
        //   this.dialogConfig1.isShow = false
        //   if (this.titleConfig.length == 6) {
        //     this.titleConfig.pop()
        //   }
      });
    },
    // 选择预警通知单
    eventChangeSelected(val, item) {
      if (val) {
        this.getPutData(val);
        this.getDailyName(val);
        // console.log(val)
        // this.notiId = val
        //   const filter = this.sourceFormConfig.formData[0].option.filter(item => item.id == val)
        //   this.eventDataForm = filter[0]
        // } else {
        //   this.eventDataForm = {}
      }
      // this.emergencyEvent = this.getEventNames(val)
      // this.getEmergencyEventsData(val)
    },
    // 获取预警通知单
    getAllWarningNotif() {
      getAllWarningNotifApi({ createDeptId: this.getCreator.creatorDeptId, noticeState: 3 }).then(res => {
        console.log(res);
        let options = [];
        options = res.data.map(item => {
          return {
            label: item.warningNoticeName,
            value: item.id,
            ...item
          };
        });
        this.sourceFormConfig.formData[0].option = options;
        this.formData[0].options = options;
      });
    },
    // 编辑
    HanEdit(id) {
      console.log(id);
      this.addPlanDialog(1);
      getByIdApi({ id }).then(res => {
        // console.log(res);
        const { notificationId } = res;
        // console.log(this.$refs.sourceFormComponent);
        this.$set(this.$refs.sourceFormComponent.form, "notificationId", notificationId);
        // const filter = this.sourceFormConfig.formData[0].option.filter(item => item.id == notificationId)
        // this.eventDataForm = filter[0]

        this.$set(this.$refs.formComponent1.form, "id", res.id);
        this.$set(this.$refs.formComponent1.form, "dailyName", res.dailyName);
        this.$set(this.$refs.formComponent1.form, "overallSituation", res.overallSituation);

        this.$set(this.$refs.formComponent2.form, "measureSituation", res.measureSituation);

        this.$set(this.$refs.formComponent3.form, "nextWorkPlan", res.nextWorkPlan);
        this.$set(this.$refs.formComponent3.form, "workSuggest", res.workSuggest);

        this.$set(this.$refs.formComponent4.form, "creator", res.creator);
        this.$set(this.$refs.formComponent4.form, "creatorDeptName", res.creatorDeptName);
        this.$set(this.$refs.formComponent4.form, "createTime", res.createTime);

        // console.log(this.$refs.formComponent4.form);
        // console.log("日报名", this.$refs.formComponent1.form);


        this.getPutData(notificationId);
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 删除到岗计划
    onDel(id) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delApi(id).then(res => {
          this.$message({
            type: "success",
            message: `删除成功`
          });
          this.list();
        });
      }).catch((err) => {
        console.log(err);
      });
    },
    // 跳转预警通知单详情
    toWarningNotice(id) {
      this.$router.push({
        name: "NoticeDetail",
        query: {
          id
        }
      });
    },
    // 查看日报详情
    viewDetail(id) {
      this.$router.push({
        name: "WarningDailyDetail",
        query: {
          id
        }
      });
    },
    // 获取预警投入力量
    getPutData(id) {
      getPutDataApi({ id }).then(res => {
        this.putData = res.resourcesVoList;
        console.log("投入力量", res);
      });
    },
    getUnitTree() {
      getOrgDepartmentList({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId }).then(res => {
        this.formData[2].treeData.attrs.data = res;
      });
    },
    // 通过预警通知单id获取日报名称
    getDailyName(id) {
      getDailyNameApi({ notificationId: id }).then(res => {
        this.$set(this.$refs.formComponent1.form, "dailyName", res);
      });
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row.id);
        console.log(scope.row);
      } else if (item === "删除") {
        this.onDel(scope.row.id);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.EmergencyList {
  :deep(.el-dialog__title) {
    font-weight: bold;
  }
}

.el-input--small .el-input__inner {
  height: 36px;
  line-height: 32px;
}

:deep(.forth) {
  width: 29%;
  display: flex;
}

:deep(.thirds) {
  width: 38%;
  display: flex;
}
</style>
